<template>
  <div class="content">
    <div style="   height: 20px;"></div>
    <el-form ref="form" :model="formData" label-width="70px" size="small">
      <el-row :gutter="28">

        <el-col :xs="9" :sm="6" :md="5" :lg="4" :xl="4">
          <el-form-item :label="$t('common.keyword')">
            <el-input v-model="formData.keyword" clearable placeholder=""></el-input>
          </el-form-item>
        </el-col>
        <el-col :xs="12" :sm="8" :md="10" :lg="8" :xl="6" class="titmepicker">
          <el-form-item label="起止时间">
            <el-date-picker v-model="formData.time" type="daterange" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期"
              :unlink-panels="true">
            </el-date-picker>
          </el-form-item>
        </el-col>
        <el-col :xs="2" :sm="2" :md="2" :lg="2" :xl="2">
          <el-form-item label-width="0px">
            <el-button type="primary" size="small" @click="handleSearch">{{ $t("common.query") }}</el-button>
          </el-form-item>
        </el-col>

      </el-row>
    </el-form>
    <div class="dataContent">
      <div style="margin-top:0px">
        <tableList @handleEdit="handleEdit" :tableData="tableData" :tableLoading="tableLoading" :pager="pager" class="tableAuto"
          v-if="!isCard" @sortChange="sortChange"></tableList>

      </div>
      <div class="pagination-area">
        <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :page-sizes="[20, 30, 50, 100]"
          :page-size="pager.pageSize" :current-page="pager.pageNum" layout="total, sizes, prev, pager, next, jumper" :total="pager.total">
        </el-pagination>
      </div>
    </div>
  </div>
</template>

<script>
import { addFormula } from "@/api/addFormula"
import tableList from "./tableList.vue"
import { configure } from "@/api/configure"
export default {
  components: {
    tableList
  }, props: {
    parentFid: String
  },
  data () {

    return {
      formData: {
        keyword: "",
        time: [],
        status: ['2']
      },
      tableData: [],
      isShowDialog: false,
      activeName: "first",
      ruleForm: {
        recipeName: "",
        item: "",
        itemDescription: "",
        itemQty: "",
        notes: "",
        recipeStatus: 1, //默认传1
        uomId: "",
        itemQtyLo: "",
        itemQtyHi: "",
      },
      loading: false,
      isCard: false,
      pager: {
        pageNum: 1,
        pageSize: 20,
        total: 0,
        field: 'fCreatorTime',
        order: 'DESC',
      },
      secle: "", //是否有选中的列表或卡片
      icon: "icon-biaoge",
      tableLoading: false,
      disabled: 0,
      itemCodeList: [],
      pagerClass: {
        pageNum: 1,
        pageSize: 20,
        total: 0
      },
      keywordClassId: "",
      echartsLoading: false,
      currObj: {},
    }
  },
  created () {
    this.getData();
  },
  methods: {
    handleSearch () {
      this.pager.pageNum = 1
      this.getData()
    },
    getData () {
      let startTime = ""
      let endTime = ""
      if (this.formData.time && this.formData.time.length > 0) {
        startTime = this.$util.format(this.formData.time[0], 'YYYY-MM-DD')
      }
      if (this.formData.time && this.formData.time.length > 0) {
        endTime = this.$util.format(this.formData.time[1], 'YYYY-MM-DD')
      }
      const param = {
        page: this.pager.pageNum,
        size: this.pager.pageSize,
        recipeName: this.formData.keyword,
        startTime: startTime,
        endTime: endTime,
        // recipeStatus:'',
        field: this.pager.field,
        order: this.pager.order,
        // isRecipeStatus:this.formData.status,
        isRecipeStatus: this.formData.status
      }
      this.tableLoading = true
      addFormula.getTbrecipeList(param).then(res => {
        this.tableLoading = false
        if (res.code == 200) {
          this.tableData = res.data.rows
          this.pager.total = res.data.total
        }
      }).catch(e => {
        this.$message.error('服务器繁忙,请稍后再试');
        this.tableLoading = false
      })
    },
    sortChange (column) {
      if (column.order === 'descending') {
        this.pager.field = column.prop
        this.pager.order = 'DESC'
      } else {
        this.pager.field = column.prop
        this.pager.order = 'ASC'
      }
      this.pager.pageNum = 1
      this.getData()
    },
    changePattern () {
      this.isCard = !this.isCard
      this.secle = ''
      this.icon = this.isCard ? 'icon-qiehuan' : 'icon-biaoge'
    },
    handleEdit (row) {
      this.ruleForm = Object.assign({}, row.row)
      this.secle = row.radioId
      this.disabled = row.row.recipeStatus
      this.currObj = row.row
    },

    handleSizeChange (val) {
      this.pager.pageNum = 1
      this.pager.pageSize = val
      this.getData()
    },
    handleCurrentChange (val) {
      this.pager.pageNum = val;
      this.secle = ''
      this.getData()
    },
    //获取物料编码列表
    getItemList () {
      const param = {
        fid: this.keywordClassId,
        page: this.pagerClass.pageNum,
        size: this.pagerClass.pageSize,
        itemClassVo: {
          produced: 1
        }
      }
      configure.getItemList(param).then(res => {
        if (res.code == 200) {
          this.itemCodeList = [...this.itemCodeList, ...res.data.rows]
        }
      }).catch(e => {

      })
    },
    //下拉加载物料编码
    loadMoreItemCodeFun () {
      this.pagerClass.pageNum++
      this.getItemList()
    },
    //远程搜索物料编码
    remoteMethodItemCode (keyword) {
      this.keywordClassId = keyword.trim();
      this.pagerClass.pageNum = 1
      setTimeout(() => {
        this.itemCodeList = []
        this.getItemList()
      }, 200)
    },
    clearItemCode () {
      this.keywordClassId = ""
      this.pagerClass.pageNum = 1
      this.itemCodeList = []
      this.getItemList()
    },
    changeCode (val) {
      let item = this.itemCodeList.find(item => item.fid == val)
      this.ruleForm.itemDescription = item.itemDesc
      this.ruleForm.uomId = item.uomId
    },
    getColor (status) {
      switch (status) {
        case 1:
          return "#00CC99"
        case 2:
          return "#2E75B5"
        case 3:
          return "#00FF00"
        case 4:
          return "#5B9BD5"
        case 5:
          return "#FFFF00"
        case 6:
          return "#F4B183"
      }
    }
  }

}
</script>

<style scoped>
.isShowDialog >>> .el-select {
  width: 100%;
}
.cardMode {
  height: calc(100vh - 275px);
  overflow: auto;
}
.btngroup {
  float: right;
}
.change >>> .iconfont {
  font-size: 13px !important;
}
.pagination-area {
  text-align: right;
  padding-top: 20px;
  padding-bottom: 10px;
}
.titmepicker >>> .el-date-editor {
  width: 100%;
}
.titmepicker >>> .el-date-editor .el-range-separator {
  width: 8%;
}
@media only screen and (max-width: 768px) {
  .titmepicker {
    display: none;
  }
}
.dataContent {
  /* height: calc(100vh - 176px); */
  border: 1px solid #ebeef5;
  /* overflow: auto; */
}
.marginLing >>> .el-row {
  margin-left: 0px !important;
  margin-right: 0px !important;
}
</style>
